<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		body {
			background-color: rgb(236, 236, 236);
		}

		.box1 {
			width: 200px;
			height: 200px;
			background-color: #bfa;
			margin: 0 auto;
			/* margin-top: 200px; */

			/* 
                变形就是指通过CSS来改变元素的形状或位置
                -   变形不会影响到页面的布局
                - transform 用来设置元素的变形效果
                    - 平移：
                        translateX() 沿着x轴方向平移
                        translateY() 沿着y轴方向平移
                        translateZ() 沿着z轴方向平移
                            - 平移元素，百分比是相对于自身计算的
            */
			/* transform: translateY(300px); */
			transform: translateX(100%);
		}

		/* .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 0 auto;
        } */

		.box3 {
			background-color: orange;
			position: absolute;
			/* 
                这种居中方式，只适用于元素的大小确定
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto; */

			left: 50%;
			top: 50%;
			font-size: 50px;
			transform: translateX(-50%) translateY(-50%);

		}

		.box4,
		.box5 {
			width: 220px;
			height: 300px;
			background-color: #fff;
			float: left;
			margin: 0 10px;
			transition: all .3s;
		}

		.box4:hover,
		.box5:hover {
			transform: translateY(-4px);
			box-shadow: 0 0 10px rgba(0, 0, 0, .3)
		}
	</style>
</head>

<body>

	<div class="box1"></div>

	<div class="box2"></div>

	<div class="box3">
        aaaa
    </div>

	<div class="box4">

	</div>

	<div class="box5">

	</div>

</body>

</html>